<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片加水印工具</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50 min-h-screen">
    <div class="container mx-auto px-6 py-8">
        <div class="max-w-6xl mx-auto">
            <!-- 标题 -->
            <div class="text-center mb-8">
                <h1 class="text-3xl font-bold text-gray-800 mb-2">
                    <i class="fas fa-image text-green-500 mr-2"></i>
                    图片加水印工具
                </h1>
                <p class="text-gray-600">为图片添加文字或图片水印，保护您的作品版权</p>
            </div>
            
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                <!-- 左侧：上传和设置 -->
                <div class="space-y-6">
                    <!-- 图片上传 -->
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                        <h3 class="text-lg font-semibold mb-4">上传图片</h3>
                        <div id="uploadArea" class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-blue-500 transition-colors cursor-pointer">
                            <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-4"></i>
                            <h4 class="text-lg font-medium text-gray-700 mb-2">选择或拖拽图片文件</h4>
                            <p class="text-gray-500 mb-4">支持 JPG、PNG、GIF 格式</p>
                            <input type="file" id="imageInput" accept="image/*" class="hidden">
                            <button onclick="document.getElementById('imageInput').click()" 
                                    class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors">
                                选择文件
                            </button>
                        </div>
                    </div>
                    
                    <!-- 水印设置 -->
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6" id="settingsPanel" style="display: none;">
                        <h3 class="text-lg font-semibold mb-4">水印设置</h3>
                        
                        <!-- 水印类型 -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-2">水印类型</label>
                            <div class="flex space-x-4">
                                <label class="flex items-center">
                                    <input type="radio" name="watermarkType" value="text" checked class="mr-2">
                                    <span>文字水印</span>
                                </label>
                                <label class="flex items-center">
                                    <input type="radio" name="watermarkType" value="image" class="mr-2">
                                    <span>图片水印</span>
                                </label>
                            </div>
                        </div>
                        
                        <!-- 文字水印设置 -->
                        <div id="textSettings">
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 mb-2">水印文字</label>
                                <input type="text" id="watermarkText" value="© 版权所有" 
                                       class="w-full border border-gray-300 rounded-lg px-3 py-2">
                            </div>
                            
                            <div class="grid grid-cols-2 gap-4 mb-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">字体大小</label>
                                    <input type="range" id="fontSize" min="12" max="72" value="24" 
                                           class="w-full">
                                    <span id="fontSizeValue" class="text-sm text-gray-600">24px</span>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">透明度</label>
                                    <input type="range" id="opacity" min="0.1" max="1" step="0.1" value="0.7" 
                                           class="w-full">
                                    <span id="opacityValue" class="text-sm text-gray-600">70%</span>
                                </div>
                            </div>
                            
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 mb-2">文字颜色</label>
                                <input type="color" id="textColor" value="#ffffff" 
                                       class="w-full h-10 border border-gray-300 rounded-lg">
                            </div>
                        </div>
                        
                        <!-- 图片水印设置 -->
                        <div id="imageSettings" style="display: none;">
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 mb-2">水印图片</label>
                                <input type="file" id="watermarkImageInput" accept="image/*" 
                                       class="w-full border border-gray-300 rounded-lg px-3 py-2">
                            </div>
                            
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 mb-2">大小比例</label>
                                <input type="range" id="watermarkSize" min="0.1" max="1" step="0.1" value="0.3" 
                                       class="w-full">
                                <span id="watermarkSizeValue" class="text-sm text-gray-600">30%</span>
                            </div>
                        </div>
                        
                        <!-- 位置设置 -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-2">水印位置</label>
                            <div class="grid grid-cols-3 gap-2">
                                <button class="position-btn border border-gray-300 rounded p-2 hover:bg-blue-50" data-position="top-left">
                                    <i class="fas fa-arrow-up"></i><i class="fas fa-arrow-left"></i>
                                </button>
                                <button class="position-btn border border-gray-300 rounded p-2 hover:bg-blue-50" data-position="top-center">
                                    <i class="fas fa-arrow-up"></i>
                                </button>
                                <button class="position-btn border border-gray-300 rounded p-2 hover:bg-blue-50" data-position="top-right">
                                    <i class="fas fa-arrow-up"></i><i class="fas fa-arrow-right"></i>
                                </button>
                                <button class="position-btn border border-gray-300 rounded p-2 hover:bg-blue-50" data-position="center-left">
                                    <i class="fas fa-arrow-left"></i>
                                </button>
                                <button class="position-btn border border-gray-300 rounded p-2 hover:bg-blue-50 bg-blue-100" data-position="center">
                                    <i class="fas fa-dot-circle"></i>
                                </button>
                                <button class="position-btn border border-gray-300 rounded p-2 hover:bg-blue-50" data-position="center-right">
                                    <i class="fas fa-arrow-right"></i>
                                </button>
                                <button class="position-btn border border-gray-300 rounded p-2 hover:bg-blue-50" data-position="bottom-left">
                                    <i class="fas fa-arrow-down"></i><i class="fas fa-arrow-left"></i>
                                </button>
                                <button class="position-btn border border-gray-300 rounded p-2 hover:bg-blue-50" data-position="bottom-center">
                                    <i class="fas fa-arrow-down"></i>
                                </button>
                                <button class="position-btn border border-gray-300 rounded p-2 hover:bg-blue-50" data-position="bottom-right">
                                    <i class="fas fa-arrow-down"></i><i class="fas fa-arrow-right"></i>
                                </button>
                            </div>
                        </div>
                        
                        <button onclick="applyWatermark()" 
                                class="w-full bg-green-600 text-white py-2 rounded-lg hover:bg-green-700 transition-colors">
                            <i class="fas fa-magic mr-2"></i>
                            应用水印
                        </button>
                    </div>
                </div>
                
                <!-- 右侧：预览和下载 -->
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h3 class="text-lg font-semibold mb-4">预览</h3>
                    <div id="previewArea" class="border border-gray-200 rounded-lg p-8 text-center min-h-96 flex items-center justify-center">
                        <div class="text-gray-400">
                            <i class="fas fa-image text-4xl mb-4"></i>
                            <p>请先上传图片</p>
                        </div>
                    </div>
                    
                    <div id="downloadSection" class="mt-6" style="display: none;">
                        <div class="flex space-x-4">
                            <button onclick="downloadImage()" 
                                    class="flex-1 bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition-colors">
                                <i class="fas fa-download mr-2"></i>
                                下载图片
                            </button>
                            <button onclick="resetTool()" 
                                    class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
                                <i class="fas fa-redo mr-2"></i>
                                重置
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        let originalImage = null;
        let watermarkImage = null;
        let currentPosition = 'center';
        
        // 文件上传处理
        document.getElementById('imageInput').addEventListener('change', handleImageSelect);
        document.getElementById('watermarkImageInput').addEventListener('change', handleWatermarkImageSelect);
        
        // 拖拽上传
        const uploadArea = document.getElementById('uploadArea');
        uploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadArea.classList.add('border-blue-500', 'bg-blue-50');
        });
        
        uploadArea.addEventListener('dragleave', (e) => {
            e.preventDefault();
            uploadArea.classList.remove('border-blue-500', 'bg-blue-50');
        });
        
        uploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadArea.classList.remove('border-blue-500', 'bg-blue-50');
            const files = e.dataTransfer.files;
            if (files.length > 0 && files[0].type.startsWith('image/')) {
                document.getElementById('imageInput').files = files;
                handleImageSelect({ target: { files: files } });
            }
        });
        
        // 水印类型切换
        document.querySelectorAll('input[name="watermarkType"]').forEach(radio => {
            radio.addEventListener('change', function() {
                const textSettings = document.getElementById('textSettings');
                const imageSettings = document.getElementById('imageSettings');
                
                if (this.value === 'text') {
                    textSettings.style.display = 'block';
                    imageSettings.style.display = 'none';
                } else {
                    textSettings.style.display = 'none';
                    imageSettings.style.display = 'block';
                }
                
                if (originalImage) {
                    applyWatermark();
                }
            });
        });
        
        // 位置选择
        document.querySelectorAll('.position-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                document.querySelectorAll('.position-btn').forEach(b => b.classList.remove('bg-blue-100'));
                this.classList.add('bg-blue-100');
                currentPosition = this.dataset.position;
                
                if (originalImage) {
                    applyWatermark();
                }
            });
        });
        
        // 实时更新
        document.getElementById('fontSize').addEventListener('input', function() {
            document.getElementById('fontSizeValue').textContent = this.value + 'px';
            if (originalImage) applyWatermark();
        });
        
        document.getElementById('opacity').addEventListener('input', function() {
            document.getElementById('opacityValue').textContent = Math.round(this.value * 100) + '%';
            if (originalImage) applyWatermark();
        });
        
        document.getElementById('watermarkSize').addEventListener('input', function() {
            document.getElementById('watermarkSizeValue').textContent = Math.round(this.value * 100) + '%';
            if (originalImage) applyWatermark();
        });
        
        document.getElementById('watermarkText').addEventListener('input', function() {
            if (originalImage) applyWatermark();
        });
        
        document.getElementById('textColor').addEventListener('change', function() {
            if (originalImage) applyWatermark();
        });
        
        function handleImageSelect(event) {
            const file = event.target.files[0];
            if (file && file.type.startsWith('image/')) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    originalImage = new Image();
                    originalImage.onload = function() {
                        displayImage(this);
                        document.getElementById('settingsPanel').style.display = 'block';
                        applyWatermark();
                    };
                    originalImage.src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        }
        
        function handleWatermarkImageSelect(event) {
            const file = event.target.files[0];
            if (file && file.type.startsWith('image/')) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    watermarkImage = new Image();
                    watermarkImage.onload = function() {
                        if (originalImage) {
                            applyWatermark();
                        }
                    };
                    watermarkImage.src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        }
        
        function displayImage(img) {
            const previewArea = document.getElementById('previewArea');
            previewArea.innerHTML = `<img src="${img.src}" alt="预览" class="max-w-full max-h-96 object-contain">`;
        }
        
        function applyWatermark() {
            if (!originalImage) return;
            
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            
            canvas.width = originalImage.width;
            canvas.height = originalImage.height;
            
            // 绘制原图
            ctx.drawImage(originalImage, 0, 0);
            
            const watermarkType = document.querySelector('input[name="watermarkType"]:checked').value;
            
            if (watermarkType === 'text') {
                applyTextWatermark(ctx, canvas);
            } else if (watermarkType === 'image' && watermarkImage) {
                applyImageWatermark(ctx, canvas);
            }
            
            // 显示结果
            const previewArea = document.getElementById('previewArea');
            previewArea.innerHTML = `<img src="${canvas.toDataURL()}" alt="预览" class="max-w-full max-h-96 object-contain">`;
            
            document.getElementById('downloadSection').style.display = 'block';
        }
        
        function applyTextWatermark(ctx, canvas) {
            const text = document.getElementById('watermarkText').value;
            const fontSize = document.getElementById('fontSize').value;
            const opacity = document.getElementById('opacity').value;
            const color = document.getElementById('textColor').value;
            
            ctx.font = `${fontSize}px Arial`;
            ctx.fillStyle = color;
            ctx.globalAlpha = opacity;
            
            const textMetrics = ctx.measureText(text);
            const textWidth = textMetrics.width;
            const textHeight = fontSize;
            
            const position = getPosition(canvas.width, canvas.height, textWidth, textHeight);
            
            // 添加文字阴影效果
            ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
            ctx.shadowBlur = 2;
            ctx.shadowOffsetX = 1;
            ctx.shadowOffsetY = 1;
            
            ctx.fillText(text, position.x, position.y);
            
            // 重置阴影
            ctx.shadowColor = 'transparent';
            ctx.shadowBlur = 0;
            ctx.shadowOffsetX = 0;
            ctx.shadowOffsetY = 0;
            ctx.globalAlpha = 1;
        }
        
        function applyImageWatermark(ctx, canvas) {
            const size = document.getElementById('watermarkSize').value;
            const opacity = document.getElementById('opacity').value;
            
            const watermarkWidth = watermarkImage.width * size;
            const watermarkHeight = watermarkImage.height * size;
            
            const position = getPosition(canvas.width, canvas.height, watermarkWidth, watermarkHeight);
            
            ctx.globalAlpha = opacity;
            ctx.drawImage(watermarkImage, position.x, position.y, watermarkWidth, watermarkHeight);
            ctx.globalAlpha = 1;
        }
        
        function getPosition(canvasWidth, canvasHeight, watermarkWidth, watermarkHeight) {
            const padding = 20;
            let x, y;
            
            switch (currentPosition) {
                case 'top-left':
                    x = padding;
                    y = padding + watermarkHeight;
                    break;
                case 'top-center':
                    x = (canvasWidth - watermarkWidth) / 2;
                    y = padding + watermarkHeight;
                    break;
                case 'top-right':
                    x = canvasWidth - watermarkWidth - padding;
                    y = padding + watermarkHeight;
                    break;
                case 'center-left':
                    x = padding;
                    y = (canvasHeight + watermarkHeight) / 2;
                    break;
                case 'center':
                    x = (canvasWidth - watermarkWidth) / 2;
                    y = (canvasHeight + watermarkHeight) / 2;
                    break;
                case 'center-right':
                    x = canvasWidth - watermarkWidth - padding;
                    y = (canvasHeight + watermarkHeight) / 2;
                    break;
                case 'bottom-left':
                    x = padding;
                    y = canvasHeight - padding;
                    break;
                case 'bottom-center':
                    x = (canvasWidth - watermarkWidth) / 2;
                    y = canvasHeight - padding;
                    break;
                case 'bottom-right':
                    x = canvasWidth - watermarkWidth - padding;
                    y = canvasHeight - padding;
                    break;
                default:
                    x = (canvasWidth - watermarkWidth) / 2;
                    y = (canvasHeight + watermarkHeight) / 2;
            }
            
            return { x, y };
        }
        
        function downloadImage() {
            const previewImg = document.querySelector('#previewArea img');
            if (previewImg) {
                const link = document.createElement('a');
                link.download = 'watermarked_image.png';
                link.href = previewImg.src;
                link.click();
            }
        }
        
        function resetTool() {
            originalImage = null;
            watermarkImage = null;
            document.getElementById('imageInput').value = '';
            document.getElementById('watermarkImageInput').value = '';
            document.getElementById('settingsPanel').style.display = 'none';
            document.getElementById('downloadSection').style.display = 'none';
            
            const previewArea = document.getElementById('previewArea');
            previewArea.innerHTML = `
                <div class="text-gray-400">
                    <i class="fas fa-image text-4xl mb-4"></i>
                    <p>请先上传图片</p>
                </div>
            `;
            
            // 重置上传区域
            const uploadArea = document.getElementById('uploadArea');
            uploadArea.innerHTML = `
                <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-4"></i>
                <h4 class="text-lg font-medium text-gray-700 mb-2">选择或拖拽图片文件</h4>
                <p class="text-gray-500 mb-4">支持 JPG、PNG、GIF 格式</p>
                <button onclick="document.getElementById('imageInput').click()" 
                        class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors">
                    选择文件
                </button>
            `;
        }
    </script>
</body>
</html>